<template>
	<uv-tabbar :value="value" @change="change" style="position: relative;">
		<uv-tabbar-item text="首页" @click="navToVerify('/pages/index/index')" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="论坛" @click="navToVerify('/pages/association/association')" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="活动" @click="navToVerify('/pages/activity/activity')" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" @click="navToVerify('/pages/me/me')" icon="account"></uv-tabbar-item>

		<view class="service-btn" @click="navTo('/pages/issue/issue')">
			<uv-icon name="plus" color="blue" size="36"></uv-icon>
		</view>

		<!-- <uv-tabbar-item v-for="(rs,i) in data" :key="i" @click="navTo(rs.pagePath)" :text="rs.text" :icon="rs.icon"></uv-tabbar-item> -->
	</uv-tabbar>
</template>
<script>
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				value: 0,
				data: [{
						"pagePath": "/pages/index/index",
						"icon": "home",
						"text": "首页"
					},
					{
						"pagePath": "/pages/association/association",
						"icon": "chat",
						"text": "论坛"
					},
					{
						"pagePath": "/pages/activity/activity",
						"icon": "calendar",
						"text": "活动"
					},
					{
						"pagePath": "/pages/me/me",
						"icon": "account",
						"text": "我的"
					},
				],
			}
		},
		mounted() {
			this.value = this.index;
			uni.hideTabBar();
		},
		methods: {
			change(e) {
				// console.log(e);
				// uni.navigateTo({
				// 			url: '/pages/login/enroll'
				// 		})
				// if (e == 1) {
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: '请您先登录'
				// 	})
				// } else {
				// 	this.value = e;
				// }
			},
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			navToVerify(path) {
				uni.switchTab({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-btn {
		position: absolute;
		top: -54rpx;
		left: 50%;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100rpx;
		height: 100rpx;
		padding: 20rpx;
		// background-color: #ffffff;
		background-color: pink;
		border-radius: 100%;
		box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.75);
		transform: scale(0.65) translate(-78%, -15%);

	}
</style>